-
Notifications
You must be signed in to change notification settings - Fork 9
/
Header.jsx
102 lines (97 loc) · 4.5 KB
/
Header.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { usePopupState, bindTrigger, bindMenu } from 'material-ui-popup-state/hooks';
import { AppBar, Toolbar, Typography, IconButton, Menu, MenuItem, Grid } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import MenuIcon from '@material-ui/icons/Menu';
import AccountCircle from '@material-ui/icons/AccountCircle';
import Link from 'components/router/Link';
import { useCurrentUser, logOut } from 'models/user';
const useStyles = makeStyles(theme => ({
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
},
}));
export default function MenuAppBar() {
const classes = useStyles();
const navMenuState = usePopupState({ variant: 'popover', popupId: 'navMenu' });
const profileMenuState = usePopupState({ variant: 'popover', popupId: 'profileMenu' });
const user = useCurrentUser();
const logoutButtonClick = () => {
logOut();
profileMenuState.close();
};
const throwException = () => {
throw new Error('Exception');
};
return (
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="menu"
data-cy="auth-menu-button"
{...bindTrigger(navMenuState)}
>
<MenuIcon />
</IconButton>
<Grid container justify="space-between" alignItems="center">
<Grid item xs={6} md={3}>
<Menu keepMounted {...bindMenu(navMenuState)}>
<MenuItem onClick={navMenuState.close}>
<Link data-cy="login" href="/login">
Login
</Link>
</MenuItem>
<MenuItem onClick={navMenuState.close}>
<Link data-cy="signup" href="/signup">
Sign Up
</Link>
</MenuItem>
<MenuItem onClick={throwException}>Throw an error</MenuItem>
</Menu>
<Link href="/">
<Typography variant="h6" color="textPrimary" className={classes.title}>
Lightmatter
</Typography>
</Link>
</Grid>
<Grid item xs={6} md={9} align="right">
{user && (
<div>
<span data-cy="logged-in-name">Hey {user.first_name}</span>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
color="inherit"
{...bindTrigger(profileMenuState)}
>
<AccountCircle />
</IconButton>
<Menu id="menu-appbar" {...bindMenu(profileMenuState)}>
<MenuItem onClick={profileMenuState.close}>
<Link href="/account">Profile</Link>
</MenuItem>
<MenuItem onClick={profileMenuState.close}>
<Link href="/account/change-password">Change Password</Link>
</MenuItem>
<MenuItem onClick={profileMenuState.close}>
<Link href="/account/change-email">Change Email</Link>
</MenuItem>
<MenuItem onClick={profileMenuState.close}>
<Link href="/account/delete-account">Delete Account</Link>
</MenuItem>
<MenuItem onClick={logoutButtonClick}>Logout</MenuItem>
</Menu>
</div>
)}
</Grid>
</Grid>
</Toolbar>
</AppBar>
);
}